<template>
  <div class="about" v-drag>
    <TreeChart :json="jsonData" @click-node="clickNode"  />
    <div class="gl_prs_ctn" :style='[contextstyle]'>
          <ul class='gl_prs_li'>
              <li @click="handleClick(1)">添加</li>
              <li @click="handleClick(2)">详情</li>
              <li @click="handleClick(3)">编辑</li>
              <li @click="handleClick(4)">删除</li>
          </ul>
    </div>  
  </div>
</template>

<script>
import TreeChart from "@/components/TreeChart";
export default {
  components: {
    TreeChart
  },
  data() {
    return {
      selectId:0,
      jsonData: {
        id:0,
        name: 'root',
        image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
        class: ["rootNode"],
        children: [
          {
            id:1,
            name: 'children1',
            image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
             children: [
              {
                id:3,
                name: 'grandchild',
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              },
              {
                id:4,
                name: 'grandchild2',
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              },
              {
                id:5,
                name: 'grandchild3',
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              }
            ]
          },
          {
            id:2,
            name: 'children2',
            image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
            children: [
              {
                id:6,
                name: 'grandchild',
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              },
              {
                id:7,
                name: 'grandchild2',
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              },
              {
                id:8,
                name: 'grandchild3',
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              }
            ]
          }
        ]
      },
      contextstyle: {
          display: 'none',
          right: '0px',
          top: '0px',
          left: '0px',
          bottom: '0px',
      }, 
    }
  },
  
  created(){
      document.oncontextmenu = ()=>{return false}
      document.addEventListener("click", () => {
            if(this.contextstyle.display == 'block'){
                this.contextstyle.display = 'none'
            }
      })
  },
  methods: {
      handleClick(type){
        console.log(type,this.selectId)
      },
      clickNode(e){
        this.selectId=e.id;
        if(window.event.x + 188 > document.documentElement.clientWidth){
            this.contextstyle.left = 'unset';
            this.contextstyle.right = document.documentElement.clientWidth - window.event.x + 'px';
        }else{
            this.contextstyle.left = window.event.x + 'px';
        }
        if(window.event.y + 166 > document.documentElement.clientHeight){
            this.contextstyle.top = 'unset';
            this.contextstyle.bottom = document.documentElement.clientHeight - window.event.y + 'px';
        }else{
            this.contextstyle.top = window.event.y + 'px';
        }                       
        this.contextstyle.display = 'block';
      },
  }
}
</script>

<style>
.about {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.gl_prs_ctn{
            width: 188px;
            background: rgb(255, 255, 255);
            box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset, rgba(102, 175, 233, 0.6) 0px 0px 8px;
            z-index: 99999;
            position: fixed;
            padding: 10px;
            box-sizing: content-box;
            height: 142px;
            border-radius: 10px;
}
.gl_prs_li{padding: unset;margin: unset;}
.gl_prs_li>li{
    cursor: pointer;   
    list-style: none;
    border-bottom: 1px solid #efefef;
    padding: 7px 10px;
}
li:last-child { border: unset }
li:hover{
      background: #ccc;
      color: #fff;
}
</style>
